<template>
  <div class="tanchuTop">
    <svg
      t="1668510262676"
      class="icona1"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="3587"
      width="200"
      height="200"
      @click="updateDetileShow"
    >
      <path
        d="M902.488017 292.831348 510.795057 686.71316l-391.68068-393.880789c-10.214642-10.270924-25.719778-11.294231-34.666544-2.334161-8.925277 9.002025-7.902994 24.607444 2.322905 34.877345l403.651316 405.930219c5.824659 5.847172 13.381775 8.601912 20.463054 8.270361 7.03523 0.267083 14.525831-2.468215 20.306488-8.314363l403.662573-405.886217c10.180873-10.269901 11.248182-25.919323 2.312672-34.877345C928.228261 281.537118 912.712893 282.560424 902.488017 292.831348z"
        p-id="3588"
      ></path>
    </svg>
    <div>
      <p class="pa1">{{ musicList.name }}</p>
      <span class="spana1">
        {{ musicList.ar[0].name }}-{{ musicList.al.name }}
      </span>
      <div class="cipan">
        <img
          src="../../assets/cz.png"
          class="img_cz"
          :class="{ img_cz_active: !zanting }"
          alt=""
        />
        <img src="../../assets/cp.png" class="img_cp" alt="" />
        <img
          :src="musicList.al.picUrl"
          class="img_dt"
          :class="!zanting ? 'img_dt_active' : 'img_dt_paused'"
          alt=""
        />
      </div>
    </div>
  </div>
  <div class="ditop">
    <div class="dileft">
      <svg
        t="1668514173584"
        class="iconaa1"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4645"
        width="200"
        height="200"
      >
        <path
          d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z"
          fill="#3D3D3D"
          p-id="4646"
        ></path>
      </svg>
    </div>
    <div class="dicenter">
      <svg
        t="1668416836310"
        class="iconaa2"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4563"
        width="200"
        height="200"
        @click="acc(-1)"
      >
        <path
          d="M364.302083 465.602819L687.954365 218.588294c38.416414-29.327534 93.791393-1.929039 93.791392 46.396277v494.029051c0 48.325316-55.374979 75.725617-93.791392 46.398084L364.302083 558.397181c-30.600916-23.357989-30.600916-69.436372 0-92.794362zM238.945254 780.798397V451.684117v-164.562559c0-19.628152-5.904521-60.475733 17.057907-75.841215 25.523642-17.068744 59.747828 1.210165 59.747828 31.919454v493.676839c0 19.628152 5.915358 60.473927-17.047069 75.841215-25.53448 17.068744-59.758666-1.211971-59.758666-31.919454z"
          fill="#231815"
          p-id="4564"
        ></path>
      </svg>
      <!-- 播放图标 -->
      <svg
        t="1668416869064"
        class="iconaa2"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6256"
        width="200"
        height="200"
        @click="play()"
        v-if="zanting"
      >
        <path
          d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
          p-id="6257"
        ></path>
      </svg>
      <!-- 暂停图标 -->
      <svg
        t="1668425735348"
        class="iconaa2"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2680"
        width="200"
        height="200"
        @click="play()"
        v-else
      >
        <path
          d="M191.397656 128.194684l191.080943 0 0 768.472256-191.080943 0 0-768.472256Z"
          p-id="2681"
        ></path>
        <path
          d="M575.874261 128.194684l192.901405 0 0 768.472256-192.901405 0 0-768.472256Z"
          p-id="2682"
        ></path>
      </svg>

      <svg
        t="1668416805394"
        class="iconaa2"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4000"
        width="200"
        height="200"
        @click="acc(1)"
      >
        <path
          d="M655.706179 465.602819L332.053897 218.588294c-38.414608-29.327534-93.791393-1.929039-93.791392 46.396277v494.029051c0 48.325316 55.376785 75.725617 93.791392 46.398084l323.652282-247.014525c30.602722-23.357989 30.602722-69.436372 0-92.794362zM781.064814 780.798397V451.684117v-164.562559c0-19.628152 5.904521-60.475733-17.057907-75.841215-25.523642-17.068744-59.747828 1.210165-59.747828 31.919454v493.676839c0 19.628152-5.915358 60.473927 17.047069 75.841215 25.532673 17.068744 59.758666-1.211971 59.758666-31.919454z"
          fill="#231815"
          p-id="4001"
        ></path>
      </svg>
      <div class="progress">
        <input
          type="range"
          class="input_pro"
          min="0"
          :max="duration"
          v-model="currentTime"
          step="0.05"
        />
      </div>
    </div>
    <div class="diright">
      <svg
        t="1668420903282"
        class="iconaa1"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="13596"
        width="200"
        height="200"
      >
        <path
          d="M469.333333 149.333333a21.333333 21.333333 0 0 1 21.333334-21.333333h469.333333a21.333333 21.333333 0 0 1 0 42.666667H490.666667a21.333333 21.333333 0 0 1-21.333334-21.333334z m490.666667 362.666667H64a21.333333 21.333333 0 0 0 0 42.666667h896a21.333333 21.333333 0 0 0 0-42.666667z m0 384H64a21.333333 21.333333 0 0 0 0 42.666667h896a21.333333 21.333333 0 0 0 0-42.666667zM42.666667 384c0-23.626667 12.22-46.34 33.526666-62.32C96 306.84 121.953333 298.666667 149.333333 298.666667c23.333333 0 45.666667 5.946667 64 16.893333V64a21.333333 21.333333 0 0 1 42.666667-1.113333c0.74 14.14 3.52 35.48 12.553333 56.78 5.833333 13.753333 13.546667 25.613333 22.36 34.42a107.46 107.46 0 0 1 20.493334 18.78c12.6 14.853333 22.373333 33.566667 29.04 55.626666a21.333333 21.333333 0 0 1-40.84 12.346667C294.666667 224.666667 287.513333 210.666667 278.846667 200.466667a64.193333 64.193333 0 0 0-13.3-12 21.133333 21.133333 0 0 1-2.96-2.366667q-3.38-3.233333-6.586667-6.813333V384c0 23.626667-12.22 46.34-33.526667 62.32C202.666667 461.16 176.713333 469.333333 149.333333 469.333333s-53.333333-8.173333-73.14-23.013333C54.886667 430.34 42.666667 407.626667 42.666667 384z m42.666666 0c0 23.126667 29.333333 42.666667 64 42.666667s64-19.54 64-42.666667-29.333333-42.666667-64-42.666667-64 19.54-64 42.666667z"
          fill="#5C5C66"
          p-id="13597"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  mounted() {
    console.log(this.musicList);
  },
  props: ["musicList", "zanting", "play", "acc"],
  methods: {
    ...mapMutations(["updateDetileShow"]),
  },
};
</script>

<style lang="less">
.icona1 {
  margin-top: 20px;
  margin-left: 40px;
  width: 25px;
  height: 25px;
}
.pa1 {
  margin-left: 45%;
  font-weight: bolder;
  font-size: 30px;
}
.spana1 {
  margin-left: 47%;
}
.cipan {
  width: 35%;
  height: 450px;
  .img_cz {
    width: 90px;
    height: 120px;
    position: absolute;
    transform-origin: 0 0;
    transform: rotate(-30deg);
    transition: all 2s;
    top: 120px;
    left: 250px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }
  .img_cz_active {
    width: 90px;
    height: 120px;
    position: absolute;
    transform-origin: 0 0;
    transform: rotate(0deg);
    transition: all 2s;
    top: 120px;
    left: 250px;
  }
  .img_cp {
    width: 300px;
    height: 300px;
    position: absolute;
    z-index: -1;
    left: 100px;
    top: 180px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }
}
.img_dt {
  width: 182px;
  height: 182px;
  border-radius: 50%;
  position: absolute;
  left: 160px;
  top: 240px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  animation: rotate_dt 0.1s linear infinite;
}
.img_dt_active {
  animation-play-state: running;
}
.img_dt_paused {
  animation-play-state: paused;
}

@keyframes rotate_dt {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.ditop {
  display: flex;
  .dicenter {
    width: 300px;
    height: 80px;
    margin-left: 580px;
    margin-top: 30px;
  }
  .iconaa1 {
    width: 30px;
    height: 30px;
  }
  .iconaa2 {
    width: 30px;
    height: 30px;
    margin-left: 30px;
  }
  .diright {
    margin-left: 420px;
    margin-top: 30px;
  }

  .dileft {
    margin-left: 50px;
    margin-top: 30px;
  }
  .progress {
    margin-top: 1px;
    margin-left: -150px;
    .input_pro {
      width: 500px;
    }
  }
}
</style>